<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.twoscreen.PlayerScreen"%>
<%@ page import="com.twoscreen.Event"%>
<%@ page import="com.twoscreen.Video"%>
<%@ page import="com.twoscreen.TUser"%>
<%@ page import="com.twoscreen.Points"%>
<%@ page import="java.util.List"%>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%
	//Variables
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
	String thisURL = request.getRequestURL().toString();
	TUser tuser = null;
	String username = null;
	String points = null;
	String correctAnswers = null;

	//Check if there is a policy cookie and get it
	Cookie psIDcookie = null;
	Boolean showCookieNotice = true;
	Cookie cookies[] = request.getCookies();
	if (cookies != null) {
		for (int i=0 ; i<cookies.length ; i++) {
			if (cookies[i].getName().equals("cookie-dismiss")) {
				showCookieNotice = false;
			}
		}
	}
	
	if (user != null) {
		tuser = TUser.getTUser(user);
		username = tuser.getUserName();
		points = Points.getPointsTotal(tuser);
	}
%>
<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate, max-age=1" />
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="expires" value="1" />
		<title>Two-Screen | Home</title>
		<link rel="shortcut icon" href="/images/favicon.ico" />
		<link href='https://fonts.googleapis.com/css?family=Montserrat|Exo:200,400' rel='stylesheet' type='text/css' />
		<link href="/css/web.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.css?v=2.1.2" media="screen" />
		<script type="text/javascript" src='/_ah/channel/jsapi'></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="/js/jquery.fancybox.js?v=2.1.3"></script>
		<script type="text/javascript" src="/js/jquery.qrcode.js"></script>
		<script type="text/javascript" src="/js/qrcode.js"></script>
		<script type="text/javascript" src="/js/comm.js"></script>
		<script type="text/javascript" src="/js/cookie.js"></script>
		<script type="text/javascript" src="/js/userUpdateWeb.js"></script>
		<script type="text/javascript" src="/js/cufon-yui.js"></script>
		<script type="text/javascript" src="/js/College_700.font.js"></script>
		<script type="text/javascript">
			Cufon.replace('h1#logo');
		</script>
		<script type="text/javascript">
			function load() {
				iniOptionsMenu();
			}
		</script>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-35281811-1']);
			_gaq.push(['_trackPageview']);
			
			(function() {
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</head>
	<body onload="load();" onunload="">
	
		<div id="head-bg">
			<div class="inner-wrapper">
				<div id="header">
					<div id="head-logo">
						<a href="/"><img id="logo" alt="home" src="/images/logo2.png" /></a>
						<h1 id="logo"><a href="/">Two-screen</a></h1>
					</div>
					<ul class="menu">

<% 
	if (user != null) {
%>
				
						<li id="head-user">
							<h3 class="menu">you</h3>
							<ul class="head-sub">
								<li class="noHover"><h3>points: <%= points %></h3></li>
								<li><h3><a class="fancybox" href="#username-update-dialog">update username</a></h3></li>
								<li><h3>
										<a class="head-link" href="<%= userService.createLogoutURL(thisURL) %>">log out</a>
									</h3>
								</li>
							</ul>
						</li>
						

<% 
	} else {
%>
				
						<li id="head-user">
							<h3 class="menu"><a class="head-link" href="<%= userService.createLoginURL(thisURL) %>">log in</a></h3>
						</li>
				
<% 
	}
%>				
				
					
						<li id="head-explore">
							<h3 class="menu"><a class="head-link" href="/connect.jsp">watch</a></h3>
						</li>
						
						
						<li id="head-create">
							<h3 class="menu"><a class="head-link" href="/producers/index.jsp">create</a></h3>
						</li>
					</ul>
					
				</div>
				<div class="clear"></div>
			</div>
		</div>
	
		<div id="home-bg">
			<div class="inner-wrapper">
			
<% if (showCookieNotice) {%><%@ include file="/include/cookie-notice.html" %><% }%>	

				<h1>What is this?</h1>
				<h3 class="thin">Two-screen connects your phone (or tablet) to your screen so you can find, watch, and 
					interact with the videos you love!</h3>
				<div class="feature-box first blue">
					<h3>Find information</h3>
					<p>You can find out more information about your favourite shows and artists on
						YouTube while watching their videos.</p>
				</div>
				<div class="feature-box green">
					<h3>Participate</h3>
					<p>Take part in your favourite YouTube shows by playing along, sending feedback,
						and sharing on social media.</p>
				</div>
				<div class="feature-box grey">
					<h3>Take control</h3>
					<p>Easily find content and play it on your internet connected TV - even if it's
						connected through your computer!</p>
				</div>
				
				<div class="clear"></div>
				<div class="space"></div>
				
				<h1>How do I watch something?</h1>
				<h3 class="thin">Getting to the video you want to watch has become a lot easier! 
					<a href="/connect.jsp">To get started click here.</a></h3>
				<img src="/images/dual-screen-TV-viewing-crop.jpeg" alt="Dual screen TV example" 
					style="width: 100%;"/>
				<p class="terms">Image for illustration purposes and does not portray the software on this website</p>
				
				<div class="space"></div>
				
				<h1>How do I create something?</h1>
				<h3 class="thin">Two-screen's effortless drag-and-drop builder lets you create interactive
					content with no coding required! <a href="/producers/index.jsp">To get started 
					click here.</a></h3>
				<div class="feature-box first blue">
					<h3>Questions</h3>
					<p>Adding appropriate and well designed questions to your video allows you to
						collect opinions and ratings from your audience. These can be used to generate
						visualisations of audience behaviour for use on your website.</p>
				</div>
				<div class="feature-box green">
					<h3>Social media</h3>
					<p>You can link your social media presence to your video allowing you and your
						audience to easily connect and engage. You can use this connection to influence
						future shows or offer rewards to your audience.</p>
				</div>
				<div class="feature-box grey">
					<h3>YouTube based</h3>
					<p>You can get started straight away creating two-screen content for your
						YouTube uploaded videos, the two-screen content you create is instantly 
						available on this site for your audience to interact with and enjoy.</p>
				</div>
				
				<div class="clear"></div>
				<div class="space"></div>

			</div>
		</div>
		<div id="username-update-dialog" style="width:400px;display: none;">
			<h3>Update user name: <span id="currentUn"><%= username %></span></h3>
			<br>
			<label for="username">User name:</label><input type="text" name="username" id="username-input">
			<br>
			<p id="unError"></p>
			<div id="unSuggestions"></div>
			<button type="button" onclick="userSave()">Save</button>
		</div>
		<div id="username-success" style="width:400px;display: none;">
			<h3 class="success">User name saved</h3>
		</div>
		
		<%@ include file="/include/footer.html" %>
		
	</body>
</html>